<template>
  <div>
    <div>
  <el-calendar>
    <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
    <!--  slot = "dateCell"定义对象来控制单元格  slot-scope 把data 循环成date 就会循环生成p块在 p块click调用处理-->
    <template
      slot="dateCell"
      slot-scope="{date, data}">
      <p @click="setOrder(date)">
        {{ data.day.split('-').slice(1).join('-') }}
         <div class="content">{{dealMyDate(data.day)}}</div>
      <div style="position: absolute;width: 100%;height: 85px;z-index: 1;bottom: 0px;" @click="setOrder(date)"></div>
    </template>
  </el-calendar>
    </div>
  <addOrder v-if="addDialogIsShow" ref="showAddOrder"></addOrder>
  </div>
</template>

<script>
  import addOrder from '@/components/front/chef/schedule/addOrder.vue'
  import api from "../../../../../axios/api"
  import utils from "../../../../../static/js/utils/index.js"
    export default {
        name: "index",

      components : {
        addOrder
      },

        data() {
          return {
            chefOrders: [],
            addDialogIsShow: false
          }
        },
        methods:{
          dealMyDate(v) {
            //console.log(v)
            let len = this.chefOrders.length
            let content = ""

            for(let i=0; i<len; i++){

              if(utils.FD.Fd().longDateFormat(this.chefOrders[i].cubegindate) == v) {
                content = this.chefOrders[i].user.uname + " " +  this.chefOrders[i].user.uphone;
                break
              }
            }
            return content;
          },
          setOrder:function(date){
             //alert(date);
            let _this = this;
            _this.addDialogIsShow = true;
            _this.$nextTick(() => {
              _this.$refs.showAddOrder.init(date);
            })
          },
          setDataFromAxios: function () {
            //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
            api.setDataFromAxios("http://localhost:9091/chefController/selectChefWithorderAndUser/7001", null, "post")
              .then(res => {
                 console.log(res);
                 this.chefOrders = res.t.cheforders;
              });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
          },
        },
      created() {
        this.setDataFromAxios();
      }

      }
</script>

<style  lang="stylus">
  .el-calendar-table
    .el-calendar-day
      position: relative

  .is-selected
    color: #f63a4c

</style>
